<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>订单信息</title>
<style type="text/css">
*{padding:0;margin:0}
body{width:90%;font-size:14px;font-family:Microsoft Yahei;padding:40px;font-family:华文楷体}
		table{border-collapse: collapse; border-spacing: 0;width:100%;border: 1px solid #ccc;}
		table th{background-color: #f1f1f1;}
		table th, table td{border: 1px solid #ccc;color:#555;padding:5px 10px;}
		input{border:1px solid #eee;padding:3px 6px;color:#666;}
		form{height:50px;}
		.topbar{height:60px;padding:0;}
		.topbar li{float:left;padding-right:20px;list-style:none;}
		ul{list-style:none}
		nav ul  li{min-width:100px;min-height:50px;float:left}
		header{background-color:#f1f1f1;min-height:70px;width:100%;line-height:70px}
		header ul  li{min-width:100px;min-height:50px;float:left;}
		footer ul li{ min-width:100px;min-height:50px;float:left}
		a{text-decoration: none;}
		a:visited{ color:black}
		aside {
			width:200px;
			min-height:500px;
			background-color:#f1f1f1;
			over-flow:auto;
			float:left;
		}
		
		section{
			float:left;
			width:800px;
			min-height:500px;
			
		}
		section  iframe{
			width:100%;
			height:600px;
			border:none;
		}
		
		



</style>	

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
<script type="text/javascript" src="static/js/lanqiao.js"></script>

</head>
<body>
	<h2>基于Vue 使用Servlet完成一个前后端分离版本的增删改查案例</h2>
	<br/>
	<h3>订单信息</h3>
	<br/>
	
	<div id="app">
	
		<table border="1">
				  <tr>
				    <th style="width:200px">订单编号</th>
				    <td>
				    	
				    	<input type="text" v-model="order.id" readonly="readonly" >
				    	
				    </td>
				
				</tr>
				 <tr>
				    <th>寄件人用户名</th>
				    <td>
				    	<input type="text" v-model="order.username" >
				  
				    </td>
				   
				</tr>
				<tr>
				    <th>寄件人</th>
				    <td>
				    	<input type="text" v-model="order.name" >
				  
				    </td>
				   
				</tr>
				  <tr>
				    <th>收货人</th>
				    <td>
				    <input type="text" v-model="order.receiver" >
				     
				    </td>
				 
				</tr>
			
				  <tr>
				    <th>电话</th>
				    <td>
				      <input type="text" v-model="order.telphone" >
				     
				    </td>
				  
				</tr>
				  <tr>
				    <th>地址</th>
				    <td>
				     <input type="text" v-model="order.address" >
				     
				    </td>
				  
				</tr>
					  <tr>
				    <th>总价</th>
				    <td>
				     <input type="text" v-model="order.price"  readonly="readonly" style="color:red;font-size:15px"> 元
				     
				    </td>
				  
				</tr>
				
				
				 <tr>
				    <th></th>
				    <td>
				       <input type="button"  value="下单去支付"  v-on:click="check"  v-if="lists.length!=0">
				     
				    </td>
				  
				</tr>
	</table>
	
	<br/>
	<h3>购买商品</h3>
	
			<table border="1">
			<tr>
		
				
				<th>商品名称</th>
				<th> 数量</th>
				<th>价格</th>
				<th>类型</th>
		
				<th>图片</th>
		
			

			</tr>
			<tr v-for="car  in lists ">	
				<td>{{car.name}}</td>
				<td>{{car.number}}</td>
				<td>{{car.price}}</td>
				<td>{{car.type}}</td>
				<td >
						<img alt="" v-bind:src="car.image" style="width:80px;height:50px">
				
				</td>

			</tr>
		</table>
	
	
</div>
</body>


<script type="text/javascript">
		var vue =new Vue({
			el:'#app',
			data:{
				order:{
					  id:'',
					  username:'',
					  name:'',
					  receiver:'',
					  telphone:'',
					  address:'',
					  price:''
				},
				lists:[]
			},
			methods:{
				init:function(){
					var _self=this;
				//获取上个页面，选中的商品ID和总价格 ，通过SessionStorage 对象 
					var selectIds =    _Global_Session.Get("selectIds");
				//查询登录信息或者临时用户信息  ，填写到对应的表单，（避免手写）
					$.get("/Tust-lanqiao-demo/order/session",function(data){
						if(data.code==200){
							_self.order=data.data;
						}
					},"json");
				
				//根据产品ID查询，用户购买的商品
				/* 	默认的话，traditional为false，即jquery会深度序列化参数对象，以适应如PHP和Ruby on Rails框架，
					但servelt api无法处理，我们可以通过设置traditional 为true阻止深度序列化，然后序列化结果如下：
					p: ["123", "456", "789"]    =>    p=123&p=456&p=456
					随即，我们就可以在后台通过request.getParameterValues()来获取参数的值数组了*/
					
					
					$.ajax({
					      url:"/Tust-lanqiao-demo/car/query",
					      traditional: true,
					      data:{
					    	  ids: selectIds
					      },
					      success:function(data){
					    	  _self.lists = data;
					    	  //计算总价
					    		//遍历Lists数组，计算总价  绑定总价到order中
					    		var sumprice=0;
								_self.lists.forEach(function(item,index){
									sumprice+=item.price;
								});
								
								 _self.order.price=sumprice;
					    	  
					      }
					});

					
				
				},
				check:function(){
					//下单
					//把购买的商品Id加入到order中,传递到服务端 ,服务器通过proids取
					var selectIds =    _Global_Session.Get("selectIds");
					var _self=this;
					this.order["proids"]=selectIds;
					
					$.ajax({
					      url:"/Tust-lanqiao-demo/order/buy",
					      traditional: true,
					      data:_self.order,
					      type:'post',
					      success:function(data){
					    	//下单成功 跳转到消息页面 显示订单编号
					    	if(data.code=200){
					    			alert(data.info+"编号是"+data.data);
					    			location.href="products.html";
					    	}else{
					    		alert(data.info);
					    	}
					    	
					    	
					      }
					});

					
					
					
					
					
					//清空SessionStorage对象缓存的商品ID
					_Global_Session.Remove("selectIds");
				}
				
				
				
			}
			
			
		});
		//初始化Vue对象完毕之后，就调用init方法 （一进入页面，就显示数据）
		vue.init();

</script>


</html>